* {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

main {
    width: 40%;
    margin: auto;
}

.section-container {
    margin-top: 20px;
    margin-bottom: 100px;
}

h1 {
    font-weight: 450;
    font-size: 40px;
}

h2 {
    font-weight: 450;
    font-size: 30px;
}

p {
    font-weight: 380;
    font-size: 24px;
    line-height: 40px;
}

footer {
    height: 200px;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 40%;
    margin: auto;
    justify-content: space-between;
    display: flex
;
    justify-items: center;
    flex-wrap: wrap;
    margin: auto;
    list-style-type: none;
    padding-left: 0;
    column-gap: 10px;
}

.section-contact {
    height: fit-content;
}

.title-section {
    font-weight: 380;
    font-size: 24px;
    line-height: auto;
    margin-bottom: 10;
}

.description {
    text-decoration: none;
    color: black;
    font-weight: 380;
    font-size: 20px;
    margin-top: 0;
}

.description:hover {
    text-decoration: underline;
    color: black;
    font-weight: 380;
    font-size: 20px;
    margin-top: 0;
}

a {
    text-decoration: none;
    color: black;
    font-weight: 380;
    font-size: 20px;
    margin-top: 0;
}

a:hover {
    text-decoration: underline;
    color: black;
    font-weight: 380;
    font-size: 20px;
    line-height: 0px;
    margin-top: 0;
}











.space-div {
    height: 200px;
}

header {
    position: relative;
    z-index: 2;
    padding-top: 40px;
    height: 60px;
    text-align: center;
    background-color: #ffffff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 0px;
}



ul {
    justify-content: space-between;
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    margin: auto;
    list-style-type: none;
    padding-left: 0;
    column-gap: 10px;
}

li {
    margin-bottom: 40px;
}

#last-li {
    margin-bottom: 0;
}


.headbutton a {
    text-decoration: none;
    color: #000000;
    font-size: 120%;
    padding: 10px 20px;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
}

.headbutton a:hover {
    background-color: #000000;
    color: #ffffff;
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
    padding: 10px;
}










figure {
    width: 100%;
    margin: 0;
    padding-bottom: 50px;
}

figcaption {
    margin-top: 20px;
    text-align: center;
}

.library {
    position: relative;
    z-index: 1;
    filter: grayscale(100%);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.library:hover {
    transition: all 0.2s ease-in-out;
    filter: none;
}






























































.section-wrapper {
    margin-top: 20px;
    margin-bottom: 100px;
    position: relative;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.interactive-heading {
    font-weight: 450;
    font-size: 30px;
    cursor: pointer;
    color: #007BFF;
    transition: color 0.3s ease;
}

.interactive-heading:hover {
    color: #0056b3;
}

.document-download-link:hover {
    text-decoration: underline;
}


























.frame-service {
    margin: auto;
    margin-top: 60px;
    margin-bottom: 30px;
    padding-bottom: 40px;
    width: auto;
    height: auto;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 8px 0.93px 7.46px 0px rgba(255, 255, 255, 0.35);
    box-shadow: inset -0.93px 0.93px 0.93px -1.86px rgba(255, 255, 255,);
    
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0px 22.37px 27.97px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(182.71px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 40.85px;
}

.title-container {
    font-size: 40px;
    color: #ffffff;
}

#special-title-heading {
    width: 93.27%;
    margin: auto;
    padding-top: 25px;
    margin-bottom: 20px;
}

.hide-scrollbar {
    width: 93.27%;
    margin: auto;
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
}

/* Общие стили для FAQ элементов */
.faq_item {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	background-color: #3334;
	/* border: 2px solid #3330; */
	border-radius: 25px;
	height: fit-content;
	padding: 40px 40px 40px 40px;
	transition:all var(--transition-short) ease-in-out;
	overflow: hidden;
	margin-bottom: 10px;
	cursor: pointer;
    transition: 0.2s ease-in-out;
}

.faq_item > .faq_item_top > .faq_item_button {
	width: 34px;
	height: 34px;
    padding: 0%;
	background-color: #474747;
	color: #fff;
    transition: 0.2s ease-in-out;
}

.faq_item > .faq_item_top > .faq_item_button > .faq_item_button_label {
	width: 34px;
	height: 34px;
	background-image: url("../media/images/css/plus-white.svg");
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: center center;
	transform: rotate(0deg);
	transform-origin: 50% 50%;
}

.faq_item_active {
    transition: 0.2s ease-in-out;
	background-color: #333;
	/* border: 2px solid #3330; */
}

.faq_item_active:hover {
    transition: 0.2s ease-in-out;
	background-color: #333;
	/* border: 2px solid #393939; */
}

.faq_item_active > .faq_item_top > .faq_item_button {
    transition: 0.2s ease-in-out;
	color: #fff;
}
.faq_item_active .faq_item_body_text{
    font-size: 16px;
    transition: 0.2s ease-in-out;
	max-height: max-content;
	height: max-content;
	transition:all var(--transition-short) ease-in-out;
}
.faq_item_top {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	/* padding-bottom: 20px; */
}

.faq_ls_top_additional-info {
	width: 100%;
	justify-content: center;
}

.faq_item_left_side {
	display: flex;
	flex-wrap: nowrap;
}

.faq_item_title_text_li {
	color: #fff;
    font-weight: 450;
	font-size: 26px;
	line-height: 32px;
}

.faq_item_button {
	border-radius: 10px;
	transition: all var(--transition-short);
}

.faq_item_button_label {
	display: flex;
	transition: all var(--transition-short);
}

.faq_item_body_text {
	display: flex;
	flex-wrap: wrap;
	max-height: 0px;
	height: max-content;
	overflow: hidden;
	transition:all var(--transition-short) ease-in-out;
}

	.faq_img_wrapper img {
		background-image: var(--image-fallback);
		border-radius: 17px;
	}

.faq_item_body_text_block {
	display: flex;
	margin-bottom: 16px;
}

.faq_item_body_text_li {
	color: #fff;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	padding-right: 160px;
}

.faq_item_body_text_li > a {
	color: #ffcc6b;
	text-decoration: none;
}

.faq_item_body_text_li > a:hover {
	text-decoration: underline;
}

.faq_item_body_text_li_space {
	height: 16px;
}

.faq_item_body_text_label {
	display: flex;
	align-items: center;
	position: relative;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-color: #ffcc6b;
	border-radius: 50%;
	margin-right: 16px;
	position: relative;
	top: -1px;
}

.faq_item_body_text_label_li {
	font-size: 14px;
	font-weight: 400;
	color: #000;
	line-height: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1px;
}

.faq_item:hover {
	background-color: #2f2f2f;
}

.faq_item_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq_item_left_side {
    font-size: 16px;
    font-weight: bold;
}

.faq_item_button {
    transition: transform 0.3s ease-in-out, background-color 0.3s;
    padding: 8px 15px;
    border-radius: 50%;
    background-color: transparent;  /* Кнопка с белым фоном */
}

.faq_item_button_label {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-icon {
    margin-left: -1px;
    margin-top: -2px;
    font-size: 24px;
    transition: transform 0.3s ease-in-out;
    color: white; 
}

.faq_item_title_text_li {
    color: #ffffff;
}

.faq_item_body_text {
    color: #ffffff;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease; 
    padding-top: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.faq_item_active .faq_item_body_text {
    transition: 0.2s ease-in-out;
    max-height: 500px;  
    opacity: 1;
}


.faq_item_active .faq_item_button {
    transition: 0.2s ease-in-out;
    background-color: #fff; 
}

.faq_item_active .button-icon {
    transition: 0.2s ease-in-out;
    color: #333; 
}




@media screen and (max-width: 1320px) {
    #spesielt-main {
        width: 70%;
    }
}

@media screen and (max-width: 787px) {
    header {
        position: relative;
        z-index: 2;
        padding-top: 40px;
        height: 120px;
        text-align: center;
        background-color: #ffffff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 0px;
    }

    ul {
        justify-content: space-between;
        display: inline-flex;
        justify-items: start;
        flex-wrap: wrap;
        margin: auto;
        list-style-type: none;
        padding-left: 0;
        column-gap: 10px;
    }
    
    li {
        margin-bottom: 40px;
    }
    
    #last-li {
        margin-bottom: 0;
    }

    .headbutton a {
        text-decoration: none;
        color: #000000;
        font-size: 70%;
        padding: 10px 20px;
        border: 1px solid transparent;
        transition: all 0.2s ease-in-out;
        border-radius: 8px;
    }
    
    .headbutton a:hover {
        background-color: #000000;
        color: #ffffff;
        transition: all 0.2s ease-in-out;
        border-radius: 8px;
        padding: 10px;
    }
}

@media screen and (max-width: 560px) {
    #spesielt-main {
        width: 90%;
    }
}

@media screen and (max-width: 460px) {
    #spesielt-main {
        width: 100%;
    }
}

@media screen and (max-width: 395px) {
    .faq_item_title_text_li {
        font-size: 20px;
    }
}










/*  Oppgave 1
a) En tilgjengelighetserklæring er en måte å vise hvor mye av en nettside er univesellt utviklet.
 
b) De som må lage en tilgjengelighetserklæring er bedriftene i offentlig sektor. Det er de som har krav på å gjøre det. 
 
c) Formålet med en tilgjengelighetserklæring er at brukeren skal kunne lese/se nettsiden uansett hvordan. At f.eks blinde skal kunne få den lest opp eller at fargeblinde kan se hva som står der, eller at de som ikke kan høre, kan lese.
 
d) En tilgjengelighetserklæring skal inneholde hvilke av kravene som er med eller ikke, en plan videre på hvordan det skal løses og en tilbakemeldingsfunksjon.
 
e) At tilgjengelighetserklæring har en tilbakemeldingsfunksjon betyr at brukere har rett til å kunne si ifra dersom noen av kravene til tilgjengelighetserklæringen ikke er blitt oppfyllt.
*/
 
/*
 Oppgave 2 = Ferdig
 Oppgave 3 = Ferdig
 Oppgave 4 = Ferdig
 - Telemark fylkseskommune sin nettside har 11 feil
 Oppgave 5 = Ferdig
 - Offentlig sektor skal følge 48 krav, mens privat sektor må følge 35
*/
 
/*  Oppgave 6
a) 
- Sjekk nettstedet selv
- Enkle grep for å nå alle på nett
 
b) Hva skal gjøre dette universelt utforma:
video:
lydklipp:
dokument:
overskrifter:
lister:
kontrast:
fargebruk:
 
c)
*/